<template>
<view>
<view class="title">
  <text class="line"></text><lang keywords="本场还剩"></lang>
  <view class="inline" v-if="activity_time.day"><text class="time">{{activity_time.day}}</text><lang keywords="天"></lang></view>
  <text class="time">{{activity_time.hours}}</text>:
  <text class="time">{{activity_time.min}}</text>:
  <text class="time">{{activity_time.sec}}</text>
  <text class="line"></text>
</view>

<view>
  <view class="shop-item" v-for="(item, index) in listData.active_list" :key="index">
    <view class="shop-img">
      <image :src="item.active_img"></image>
      <block :hidden="true"><lang class="img-tip" keywords="品牌甄选"></lang></block>
    </view>
    <view class="info-box">
      <view class="name-box">
        <text class="name"><text class="sale-tip">{{item.active_label}}</text>{{item.active_name}}</text>
        <text class='small distance' v-if="item.range">{{item.range}}</text>
      </view>
      <view class="small desc">{{item.active_desc}}</view>
      <view class="rel flex flex-center price-box">
		<text class="small red bold">{{currency}}</text>
        <text class="red mr5 now-price">{{item.active_price}}</text>
        <view class="small gray old-price inline" v-if="item.old_price!= item.active_price"><lang keywords="门市价"></lang>:{{currency + item.old_price}}</view>
      </view>
      <view class="discount-icon" v-if="item.active_info != ''">
        <text class="icon">{{item.active_info}}</text>
      </view>
    </view>
    <form :report-submit="true" class="formidForm" @submit="goUrl($event)" :data-url="item.active_link" :data-url_title="item.active_name" :data-goodsid="item.id">
      <button formType="submit" class="formidBtn"></button>
    </form>
  </view>

</view>
</view>
</template>

<script>
var _this;
var app = getApp();
import common from '../../utils/common.js'

export default {
  data() {
    return {
      lng: 0,
      lat: 0,
      listData: {},
	  activity_time: {},
	  currency: '¥'
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    _this = this;
    common.setMainColor(_this);
    wx.setNavigationBarTitle({
      title: common.changeTxt('超值优惠')
    });
	if ((options.lng && options.lng != 'undefined') || (options.lat && options.lat != 'undefined')) {
		_this.lng = options.lng;
		_this.lat = options.lat;
	}
    
    getList();
	common.changeCurrency(this)
	
	//#ifdef H5
	common.hideWxShare()
	//#endif
  },
  methods: {
    // 页面跳转
    goUrl: function (e) {
      if (e.type == 'submit') {
        common.upFormid(e);
      }

      goodsReport(e.currentTarget.dataset.goodsid);
      var pageTitle = e.currentTarget.dataset.url_title;
      var url = e.currentTarget.dataset.url;

      if (!pageTitle) {
        pageTitle = '';
      }

      common.parseUrl(url, '', false, pageTitle);
    }
  }
};
// 超值抢购商品点击上报
const goodsReport = id => {
  common.post('Home&a=plat_buy_active_up', {
    id: id,
    noTip: true
  }, data => {});
};
//列表数据
const getList = () => {
  var param = {};

  param.lng = _this.lng;
  param.lat = _this.lat;

  common.post('Home&a=plat_buy_active', param, data => {
    if (data) {
      if (data.have) {
        countDown(data.end_time);
      }

      wx.setNavigationBarTitle({
        title: data.name
      });

		_this.listData = data
    }
  });
}; 
// 超值抢购倒计时
const countDown = s => {
  var activity_time = timestampToTime(s);

   _this.activity_time = activity_time

  if (s == 0) {
    return;
  }

  setTimeout(() => {
    s--;
    countDown(s);
  }, 1000);
}; 
// 时间转换
const timestampToTime = s => {
  var day = Math.floor(s / 3600 / 24);
  var hours = Math.floor(s / 3600 % 24);
  var min = Math.floor(s / 60) % 60;
  var sec = s % 60;
  hours = add(hours);
  min = add(min);
  sec = add(sec);
  return {
    day,
    hours,
    min,
    sec
  };
};
// 添 0
function add(m) {
  return m < 10 ? '0' + m : m;
}

</script>
<style>
/* pages/index/dicount_list.css */
.rel{position: relative;}
.flex{display: flex;}
.flex-center{align-items: center;}
.flex-between{justify-content: space-between;}
.flex-wrap{flex-wrap: wrap;}
.border-b::after{content: '';position: absolute;bottom: 0;left: 0;height: 1rpx;right: 0;background: #e5e5e5;transform: scaleY(0.5);}
.mb5{margin-bottom: 5px;}
.mt5{margin-top: 5px;}
.mr5{margin-right: 5px;}
.line-through{text-decoration: line-through;}
.inline{display: inline-block;}

page{padding-top:50px;}

.title{display: flex;align-items: center;background: #fff;height: 40px;font-size: 14px;margin-bottom: 10px;
box-shadow: 0 -1px 1px 1px #bbb;position: fixed;top: 0;left: 0;right: 0;z-index: 10;}
.title .line{height: 1px;background:#ddd;flex-grow: 1;margin: 0 20rpx;}
.title .time{font-size: 12px;width: 18px;height: 18px;background: red;color: #fff;display: inline-block;
text-align: center;line-height: 18px;margin: 2px 4px 0;border-radius: 2px;}

.shop-item{padding: 20rpx;display: flex;position: relative;width: 100%;box-sizing: border-box;background: #fff;
margin-bottom: 20rpx;}
.shop-item .shop-img{width: 85px;height: 85px;border-radius: 5px;flex-shrink: 0;margin-right: 20rpx;overflow: hidden;position: relative;}
.shop-item .shop-img image{width: 100%;height: 100%;display: block;}
.shop-item .info-box{position: relative;width: calc(100% - 90px - 20rpx);}
.shop-item .small{color: #333;font-size: 12px;}
.shop-item .small.distance{margin-top: 2px;}
.shop-item .small.bg{background: #f4f4f4;margin-right: 5px;margin-bottom: 5px;padding: 0 20rpx;}
.shop-item .name-box{display: flex;justify-content: space-between;position: relative;}
.shop-item .name-box .icon{margin-left: 5px;font-size: 11px;background: #fdbe4b;height: 15px;padding: 0 3px;border-radius: 2px;
align-self: center;color: #333;line-height: 15px;}
.shop-item .name{font-size: 16px;font-weight: 500;flex-grow: 1;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;white-space: normal !important;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin:0 5px 4px 0;}
.shop-item .gray{color:#bbb;}
.shop-item .red{color:#f6503e;} 
.shop-item .orange{color: #f17019;font-weight: bold;}
.shop-item .bold{font-weight: bold;}
.shop-item .right{position: absolute;right: 0;}
.shop-item .bottom{position: absolute;bottom: 0;}
.shop-item .desc{margin-bottom:4px;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.shop-item .price-box{line-height: 18px;margin-bottom: 5px;}
.shop-item .now-price{font-size: 18px;font-weight: 500;}
.shop-item .discount-icon{display: flex;flex-wrap: wrap;}
.shop-item .discount-icon .icon{margin-right:5px;margin-bottom: 5px;font-size:11px;padding:0 3px;border-radius:2px;color:#ce847f;border:1rpx solid #f4cfcc;background:#fff4f2; }
.shop-item .img-tip{position: absolute;left: 0;bottom: 0;color: #fff;padding: 0 5px;font-size: 12px;
background: linear-gradient(to right, rgb(247, 105, 57) , rgb(255, 60, 0));border-radius: 0 10px 0 5px;}
.shop-item .sale-tip{background: linear-gradient(to right, rgb(247, 105, 57) , rgb(255, 60, 0));color: #fff;font-size: 11px;margin-right: 5px;padding: 1px 5px;border-radius: 2px;}
.shop-item .discount-num{background: #f9e8ec;padding: 3px 5px 3px 8px;position: relative;margin-left: 12px;z-index: 3;border-radius: 2px;}
.shop-item .discount-num::after{content: '';width: 12px;height: 12px;background: #f9e8ec;position: absolute;left: -5px;top: 3px;
transform: rotate(45deg);border-radius: 2px;}
.shop-item .progress{display: inline-block;width: 50%;height: 12px;border-radius: 6px;background: #fdbeb7;vertical-align: top;position: relative;overflow: hidden;}
.shop-item .progress .line{position: absolute;top:0;left:0;width: 20%;height:100%;background:#e6170f;}
.shop-item .progress .num{font-size: 11px;color: #fff;position: absolute;line-height: 12px;left: 10px;}
.shop-item .buy-btn{position: absolute;right: 0;top: -14px;color: #fff;font-size: 12px;padding:5px 12px;border-radius: 20px;
background: linear-gradient(to right, #f77750 , #fb3567);}
</style>